<template>
  <div class="dashboard-container">
    <div class="bgc">
      <div
        class="dashboard-text"
        style="
          border-bottom: 1px solid #fff;
          display: flex;
          justify-content: space-between;
          align-items: center;
          box-sizing: border-box;
          padding: 0 140px;
        "
      >
        <div
          style="
            color: #fff;
            font-weight: 500;
            font-size: 24px;
            box-sizing: border-box;
            padding-left: 20px;
            display: flex;
            align-items: center;
          "
        >
          当前设备组信息:
          <el-select v-model="optionsValue" placeholder="请选择" style="margin-left: 24px" @change="zhokr">
            <el-option v-for="item in options" :key="item" :value="item" />
          </el-select>
        </div>
        <div style="display: flex">
          <div
            class="tianjia"
            style="
              width: 80px;
              cursor: pointer;
              height: 30px;
              line-height: 30px;
              font-size: 16px;
              text-align: center;
              align-items: center;
              border: 1px solid #fff;
              border-radius: 5px;
              color: #fff;
            "
            @click="handleEdit()"
          >
            添加
          </div>
          <!--          <div-->
          <!--            class="tianjia"-->
          <!--            style="-->
          <!--              width: 80px;-->
          <!--              cursor: pointer;-->
          <!--              height: 30px;-->
          <!--              line-height: 30px;-->
          <!--              font-size: 16px;-->
          <!--              text-align: center;-->
          <!--              align-items: center;-->
          <!--              border: 1px solid #fff;-->
          <!--              border-radius: 5px;-->
          <!--              color: #fff;-->
          <!--            "-->
          <!--          >-->
          <!--            导出-->
          <!--          </div>-->
          <!--          <div-->
          <!--            class="tianjia"-->
          <!--            style="-->
          <!--              width: 80px;-->
          <!--              cursor: pointer;-->
          <!--              height: 30px;-->
          <!--              line-height: 30px;-->
          <!--              font-size: 16px;-->
          <!--              text-align: center;-->
          <!--              align-items: center;-->
          <!--              border: 1px solid #fff;-->
          <!--              border-radius: 5px;-->
          <!--              color: #fff;-->
          <!--            "-->
          <!--          >-->
          <!--            导入-->
          <!--          </div>-->
        </div>
      </div>
      <div class="lists">
        <el-table
          class="box"
          :data="list"
          :highlight-current-row="false"
          :default-sort="{ prop: 'date', order: 'descending' }"
          :height="600"
        >
          <el-table-column prop="id" label="ID" sortable width="50" fixed />
          <el-table-column prop="name" label="传感器名称" sortable width="100" fixed />
          <el-table-column prop="group" label="组" sortable width="50" fixed />
          <el-table-column prop="unit" label="单位" sortable width="50" fixed />
          <el-table-column prop="group" label="安装位置" sortable width="80" />
          <el-table-column prop="calibration" label="参数" sortable width="80" />
          <el-table-column prop="formula" label="公式" sortable width="80" />
          <el-table-column prop="base_value" label="基准值" sortable width="80" />
          <el-table-column prop="base_time" label="基准时间" sortable width="80" />
          <el-table-column prop="decimals" label="小数位数" sortable width="80" />
          <el-table-column prop="line_type" label="曲线类型" sortable width="80" />
          <el-table-column prop="ascii_file" label="Ascii 文件" sortable width="100" />
          <el-table-column prop="in_file" label="在文件第几列" sortable width="50" />
          <el-table-column prop="orange_alarm_level_lower" label="橙色预警下限" sortable width="80" />
          <el-table-column prop="orange_alarm_level_lower" label="橙色预警上限" sortable width="80" />
          <el-table-column prop="red_alarm_level_lower" label="红色预警下限" sortable width="80" />
          <el-table-column prop="red_alarm_level_lower" label="红色预警上限" sortable width="80" />
          <el-table-column prop="black_alarm_level_lower" label="黑色预警下限" sortable width="80" />
          <el-table-column prop="black_alarm_level_lower" label="黑色预警上限" sortable width="80" />

          <el-table-column label="操作" width="180" fixed="right">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          class="mt"
          layout="prev, pager, next"
          :total="total"
          :page-size="page - size"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { sensor_group, sensor_list, sensor_delete } from '@/api/sensor'
export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters(['currentProjectId'])
  },
  data() {
    return {
      tableData: [],
      page: '',
      page_size: '10',
      total: 0,
      options: [],
      optionsValue: '',
      list: []
    }
  },
  watch: {
    currentProjectId(newValue, oldValue) {
      if (newValue !== oldValue) {
        this.senList()
      }
    }
  },
  created() {
    this.getList()
    this.senList()
  },
  methods: {
    zhokr(item) {
      this.optionsValue = item
      this.senList()
    },
    handleDelete(index, item) {
      sensor_delete({ id: item.id }).then(res => {
        if (res.code === 200) {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getList()
        } else {
          this.$message({
            message: '删除失败',
            type: 'error'
          })
        }
      })
    },
    handleEdit(index, item) {
      this.$router.push({
        path: 'addequi',
        query: { project_id: this.$store.getters.currentProjectId, item: JSON.stringify(item) }
      })
    },
    senList() {
      sensor_list(this.$store.getters.currentProjectId, this.optionsValue).then(res => {
        if (res.code === 200) {
          this.list = res.data.list
          this.page = res.data.page
          this.page_size = res.data.page_size
          this.total = res.data.total
        }
      })
    },
    getList() {
      // 获取组列表
      sensor_group(this.$store.getters.currentProjectId).then(res => {
        if (res.code === 200) {
          this.options = res.data
          // if (this.optionsValue === '') {
          this.optionsValue = this.options[0]
          // }
          this.senList()
        }
      })
    }
  }
}
</script>

    <style lang="scss" scoped>
.bgc {
  width: 100%;
  height: 80vh;
  border: 1px solid rgb(101, 166, 231);
  // background-color: red;
  //   width: 400px;
  //  height: 300px;
  //  background-color: #222 !important;
  //  border-radius: 10px;
  //  display: flex;
  //  align-items: center;
  //  justify-content: center;
  //  font-size: 20px;
  //  color: #fff;
  //  font-weight: 800;
  //  position: relative;
  //  z-index: 20;
  // background: url('../../views/images/编组-3-20240612172302722_副本.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  // background-color: red;
}
::v-deep .el-input__inner {
  background-color: transparent !important;
}
::v-deep .el-select:hover .el-input__inner {
  background-color: transparent !important;
}
::v-deep .el-table th {
  background-color: transparent !important;
}
::v-deep .el-table {
  background-color: transparent !important;
  color: #fff !important;
  font-weight: 500;
}
::v-deep .el-table__row:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
}
::v-deep.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: rgba(255, 255, 255, 0.05) !important;
}
::v-deep .el-table tr {
  background-color: transparent !important;
}
::v-deep .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
}
// ::v-deep .el-table::before {
//   //去除底部白线
//   left: 0;
//   bottom: 0;
//   width: 100%;
//   height: 0px;
// }
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.mt {
  margin: 0 auto;
  margin-top: 20px;
  text-align: center;
}
::v-deep .el-pagination.is-background .el-pager li {
  background-color: transparent !important;
  border: 1px solid #fff;
  color: #fff;
}
::v-deep .el-pagination.is-background .btn-prev {
  background-color: transparent !important;
  color: #fff !important;
  border: 1px solid #fff !important;
}
::v-deep.el-pagination.is-background .btn-next {
  background-color: transparent !important;
  color: #fff !important;
  border: 1px solid #fff !important;
}
</style>
